<template functional>
    <!--递归显示导航菜单-->
    <a-sub-menu
        v-if="props.model.children && props.model.children.length>0"
        :key="props.model.id"
    >
        <span slot="title">
          <a-icon :type="props.model.icon||'bars'" /><span>{{ props.model.title }}</span>
        </span>
        <MyTreeMenu v-for="child in props.model.children" :model="child"/>
    </a-sub-menu>
    <a-menu-item
        v-else
        :key="props.model.id"
    >
        <a-icon :type="props.model.icon||'solution'"/>
        <span>{{ props.model.title }}</span>
    </a-menu-item>
</template>

<script>
    export default {
        name: "MyTreeMenu",
        props: {
            model: Object,
        },
        data(){
            return {

            };
        },
        methods: {
            getIcon(){
                let {icon} = this.props.model;
                return icon?icon:'home';
            },
        },
    }
</script>

<style scoped>

</style>
